/* eslint-disable */
import React from 'react';
import { Accordion, List } from 'antd-mobile';
import Header from '../common/Header';
import '../../../less/eventDetail/index.less'
import { Steps, WingBlank, WhiteSpace } from 'antd-mobile';
import EventDetailItem from './eventDetailItem'

import 'antd-mobile/dist/antd-mobile.css';
import { Button } from 'antd-mobile';
import styles from './eventDetail.less';

import ToBeChecked from '../common/ToBeChecked';


const Step = Steps.Step;

const customIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" className="am-icon am-icon-md">
        <g fillRule="evenodd" stroke="transparent" strokeWidth="4">
            <path d="M21 0C9.402 0 0 9.402 0 21c0 11.6 9.402 21 21 21s21-9.4 21-21C42 9.402 32.598 0 21 0z" />
            <path fill="#FFF" d="M29 18.73c0-.55-.447-1-1-1H23.36l4.428-5.05c.407-.46.407-1.208 0-1.668-.407-.46-1.068-.46-1.476 0l-5.21 5.89-5.21-5.89c-.406-.46-1.067-.46-1.475 0-.406.46-.406 1.207 0 1.667l4.43 5.05H14.23c-.55 0-.998.45-.998 1 0 .554.448.97 1 .97h5.9v3.942h-5.9c-.552 0-1 .448-1 1s.448.985 1 .985h5.9v4.896c0 .552.448 1 1 1 .55 0 .968-.284.968-.836v-5.06H28c.553 0 1-.433 1-.985s-.447-1-1-1h-5.9v-3.94H28c.553 0 1-.418 1-.97z" />
        </g>
    </svg>
);

const finishedResult = [
    {
        title: '发现单位',
        subtitle: '系统预警',
        info: '绍兴市诸暨市有疑似垃圾违规倾倒行为,新增面积为26m2.',
        image: 1
    },
    {
        title: '响应单位',
        subtitle: '综合执法局',
        info: '确认事件属实,请联系相关运输单位进行核查。',
        image: null
    },
    {
        title: '处理单位',
        subtitle: '系统预警',
        info: '联系捷运运输单位去现场整改,将垃圾运输至响应建筑垃圾消纳场。',
        image: 1
    },
    {
        title: '处理完成',
        subtitle: '无',
        info: null,
        image: null
    },
]

const pendingResult = [
    {
        title: '发现单位',
        subtitle: '系统预警',
        info: '浙D23A63 车俩在新民路2号附近发现偏离规定路径行驶',
        image: 1
    }

]
export default class eventDetail extends React.Component {
    render() {
        if (this.props.match.params.status === 'finished') {
            return (
                <div>
                    {/* <Header title={'事件详情'} /> */}
                    <WhiteSpace />
                    <div className={styles.warnTitle}>
                        <b>诸暨新民路建筑垃圾违规倾倒预警</b> <span className={styles.suceessBorder}
                        >&nbsp;&nbsp;已完成&nbsp;&nbsp;</span>
                        <div>
                            风险级别 -
                        <span>紧急</span>
                        </div>
                        <div>
                            风险级别 -
                        <span>违规倾倒预警</span>
                        </div>
                    </div>
                    <WhiteSpace />

                    <Steps className={styles.stepItem}>
                        {finishedResult.map((item, index) => <Step key={index} status="process" title={item.title + ' - ' + item.subtitle} icon={customIcon()} description={
                            <EventDetailItem content={item.info} isImage={item.image} />
                        } />)}
                    </Steps>
                </div>
            );
        } else if (this.props.match.params.status === 'pending') {
            return (
                <div>
                    {/* <Header title={'事件详情'} /> */}
                    <WhiteSpace />
                    <div className={styles.warnTitle}>
                        <b>浙D23A63 车俩偏离规定路径</b> <span className={styles.warnBorder}
                        >&nbsp;&nbsp;待响应&nbsp;&nbsp;</span>
                        <div>
                            风险级别 -
                    <span>普通</span>
                        </div>
                        <div>
                            风险级别 -
                    <span>车俩预警</span>
                        </div>
                    </div>
                    <WhiteSpace />

                    <Steps className={styles.stepItem}>
                        {pendingResult.map((item, index) => <Step key={index} status="process" title={item.title + ' - ' + item.subtitle} icon={customIcon()} description={
                            <EventDetailItem content={item.info} isImage={item.image} toBeChecked={'true'} />
                        } />)}
                    </Steps>
                    <ToBeChecked />
                </div>
            )
        } else {
            return (
                <div>组件未找到</div>
            )

        }

    }
}
